<template>
  <div>
    <div class="topgoods">
      <el-input placeholder="输入领取用户手机号搜索" v-model="phone" clearable size='small' style="float:right;width:200px;">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchRedpacket"></i>
      </el-input>
      <span>红包类型</span>
      <el-select v-model="type" placeholder="请选择红包类型" style="width:150px;margin:0 20px;" size='mini'>
        <el-option label="全部" :value='0'></el-option>
        <el-option label="普通红包" :value='1'></el-option>
        <el-option label="指定用户红包" :value='2'></el-option>
      </el-select>

      <span>领取状态</span>
      <el-select v-model="status" placeholder="请选择红包类型" style="width:150px;margin:0 20px;" size='mini'>
        <el-option label="全部" :value='0'></el-option>
        <el-option label="已发放" :value='1'></el-option>
        <el-option label="已领取" :value='2'></el-option>
        <el-option label="已失效" :value='3'></el-option>
      </el-select>
    </div>
    <div class="record_line"></div>

    <el-table :data="tableData" style="width:100%" max-height="680" :cell-style="tc" :header-cell-style="tccolor">

      <el-table-column prop="createAt" label="发送时间" width="160">
        <template slot-scope="scope">
          <div>
            {{ parseTime(scope.row.createAt) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="红包面额"></el-table-column>


      <el-table-column label='红包类型' width='120'>
        <template slot-scope="scope">
          <p v-if="scope.row.type == 1">均分</p>
          <p v-if="scope.row.type == 2">随机</p>
          <p v-else>专属</p>
        </template>
      </el-table-column>

      <el-table-column label="领取范围">
        <template slot-scope="scope">
          <p v-if="scope.row.receiverType == 0">指定人</p>
          <p v-if="scope.row.receiverType == 1">所有人</p>
          <p v-if="scope.row.receiverType == 2">发展的会员</p>

        </template>
      </el-table-column>
      <el-table-column label="红包数量" prop="totalCount"></el-table-column>
      <el-table-column prop='account' label='状态'>
        <template slot-scope="scope">
          <p v-if="scope.row.status == 1">可领取</p>
          <p v-if="scope.row.status == 2">已领完</p>
          <p v-if="scope.row.status == 3">已失效</p>
        </template>
      </el-table-column>
      <el-table-column label="已领取数量">
        <template slot-scope="scope">
          <p>{{ Number(scope.row.totalCount) - Number(scope.row.remainingCount) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <p class="red_get_Detail" @click="getRedPacketDetail(scope.row)">领取详情</p>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="phone"
        label="领取用户"
        width="240"></el-table-column>
        <el-table-column prop="invalid_time"
        label="领取时间"
        width="240"></el-table-column> -->
    </el-table>
    <!--
   @size-change="handleSizeChange" -->
    <el-col :span="24">
      <div class="pagination">

        <el-pagination background @current-change="pageChange" @size-change="handleSizeChange"
          :page-sizes="[15, 30, 50, 100]" :current-page="queryData.pageNum" :page-size="queryData.pageSize"
          layout="total,sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-col>

    <jdialog title="红包使用记录" :visible.sync='isShowPacketRecord'>
      <el-table :data="receiveData" style="width:640px;padding:25px;" max-height="680" :cell-style="tc"
        :header-cell-style="tccolor">
        <el-table-column label="用户昵称" prop="username">
          <template slot-scope="scope">
            {{ scope.row.sendByUser.nickName }}
          </template>
        </el-table-column>
        <el-table-column label="领红包金额">
          <template slot-scope="scope">
            ¥{{ scope.row.amount }}
          </template>
        </el-table-column>
        <el-table-column label="领取时间" prop="createAt"></el-table-column>
      </el-table>

      <!-- <el-pagination background class="pagination" @current-change="receivepageChange" :current-page="receivePage"
        :page-size="receiveSize" layout="total, prev, pager, next, jumper" :total="receiveTotal"></el-pagination> -->
    </jdialog>
  </div>
</template>

<script>
// import {shopRedPacketSend,shopRedPacketReceiveUser} from '@/api/shopdetail'
import { redPacketsendRecordpageList, listByRedPacketId } from '@/api/store'
export default {
  props: ['shopId', 'memberId'],
  data() {
    return {

      status: '',
      type: '',
      phone: '',
      page: 1,
      size: 20,
      total: 0,
      tableData: [],
      isShowPacketRecord: false,

      receivePage: 1,
      receiveSize: 20,
      receiveData: [],
      receiveTotal: 0,
      currentId: '',
      queryData: {
        pageNum: 1,
        pageSize: 20,
        uid: this.memberId
      }
    }
  },
  mounted() {
    console.log(this.shopId, this.memberId)
    this.getRedPacketRecord()
  },
  watch: {
    shopId(newValue) {
      if (newValue) {
        this.getRedPacketRecord()
      }
    },
    memberId(newValue) {
      if (newValue) {
        this.getRedPacketRecord()
      }
    }
  },
  methods: {
    async getRedPacketRecord() {
      if (this.status == '') {
        this.status = 0
      }
      if (this.type == '') {
        this.type = 0
      }
      // var url = "page="+this.page+
      //           "&size="+this.size+
      //           "&status="+this.status+
      //           "&type="+this.type+
      //           '&phone='+this.phone
      let res = await redPacketsendRecordpageList(this.queryData)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    getRedPacketDetail(row) {
      this.currentId = row.id
      this.getshopRedPacketReceiveUserData(row.id)
      this.receiveData = row
      this.isShowPacketRecord = true
    },
    receivepageChange(page) {
      this.receivePage = page
      this.getshopRedPacketReceiveUserData(this.currentId)
    },
    async getshopRedPacketReceiveUserData(id) {
      var url = 'page=' + this.receivePage +
        '&size=' + this.receiveSize +
        '&id=' + id
      let res = await listByRedPacketId(id)
      if (res.code === 200) {
        this.isShowPacketRecord = true
        this.receiveData = res.data
        this.receiveTotal = res.data.total
      } else {
        this.$message.error(res.message)
      }
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    searchRedpacket() {
      this.queryData.pageNum = 1
      this.getRedPacketRecord(this.shopId)
    },
    pageChange(page) {
      this.queryData.pageNum = page;
      this.getRedPacketRecord(this.shopId)
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.pageChange(1);
    },
  }
}
</script>

<style lang="scss" scoped>
.topgoods {
  height: 30px;

  .goodnum {
    float: left;
    width: 400px;
  }

  .goodsname {
    float: right;
    width: 200px;
    margin-top: -5px;
  }
}

.record_line {
  margin: 10px 0;
  height: 1px;
  background-color: #e6e6e6;
}

.doing {
  color: blue;
}

.success {
  color: green;
}

.failure {
  color: red;
}

.operate_info {
  float: left;
}

.status—desc {
  float: right;
}

.pagination {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}

.red_get_Detail {
  color: #f4222d;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
</style>
